<template>
    <!--规则草图规范导入导出  -->
    <div class="ruleCtImport">
        <!-- 标题 -->
        <div class="title">
            <ul>
                <li class="act">规则草图规范化导入导出</li>
            </ul>
        </div>
        <!-- 内容 -->
        <div class="content">
            <div class="con">
                <!-- 检索表单 -->
                <el-form :inline="true" :model="form">
                    <el-form-item>
                        <el-input style="width: 400px;
height: 40px;" clearable v-model="form.inputVal" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-right:29%">
                        <el-button size="mini" style="width: 120px;
height: 40px;border-radius: 6px;background-color: #4271c4; color: #fff; font-size: 20px" icon="el-icon-search"
                            @click="handleSearch">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="mini" style="width: 120px;
height: 40px;border-radius: 6px;background-color: #4271c4; color: #fff; font-size: 20px"
                            @click="handleUp">上传</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="mini" style="width: 120px;
height: 40px;border-radius: 6px;background-color: #4271c4; color: #fff; font-size: 20px"
                            @click="handleDb">打包</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="mini" style="width: 120px;
height: 40px;border-radius: 6px;background-color: #4271c4; color: #fff; font-size: 20px"
                            @click="handleXML">XML输出</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="mini" style="width: 120px;
height: 40px;border-radius: 6px;background-color: #4271c4; color: #fff; font-size: 20px"
                            @click="handleJSON">json输出</el-button>
                    </el-form-item>
                </el-form>
                <!-- 表格内容 -->
                <el-table height="75vh" :data="tableData" style="width: 100%">
                    <el-table-column label="序号" width="80">
                        <template slot-scope="scope">
                            <span v-text="getIndex(scope.$index)"> </span>
                        </template>

                    </el-table-column>
                    <el-table-column prop="gxfl" label="关系分类"> </el-table-column>
                    <el-table-column prop="gzName" label="规则名称"> </el-table-column>
                    <el-table-column prop="sj" label="设计"> </el-table-column>
                    <el-table-column prop="bm" label="编码"> </el-table-column>
                    <el-table-column prop="bq" label="标签"> </el-table-column>
                    <el-table-column prop="dec" label="描述"> </el-table-column>
                    <el-table-column prop="dec" label="操作">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
                            <!-- 详情页弹窗 -->
                            <el-dialog title="详情" :visible.sync="dialogVisible" :before-close="handleClose">
                                <el-form style="width:500px;margin: 0 auto;" :model="formList" label-width="120px">
                                    <el-form-item label="关系分类：">
                                        <el-input disabled v-model="formList.gxId"></el-input>
                                    </el-form-item>
                                    <el-form-item label="规则名称：">
                                        <el-input disabled v-model="formList.gzName"></el-input>
                                    </el-form-item>
                                    <el-form-item label="设计：">
                                        <el-input disabled v-model="formList.sj"></el-input>
                                    </el-form-item>
                                    <el-form-item label="编码：">
                                        <el-input disabled v-model="formList.bm"></el-input>
                                    </el-form-item>
                                    <el-form-item label="标签：">
                                        <el-input disabled v-model="formList.bq"></el-input>
                                    </el-form-item>
                                    <el-form-item label="描述：">
                                        <textarea disabled style="width:100%;height: 100px;"
                                            v-model="formList.dec"></textarea>
                                    </el-form-item>
                                </el-form>
                                <div slot="footer" class="dialog-footer" style="text-align: center;">
                                    <el-button style="width: 160px;
	height: 40px;background: #4271C4;color: #fff;" @click="dialogVisible = false">返回</el-button>
                                </div>
                            </el-dialog>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页器 -->
                <el-pagination style="margin-top: 5px; float: right;background: #fff;" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20, 25, 30, 35, 40]" :page-size="pageSize" :total="total"
                    layout="total, sizes, prev, pager, next, jumper">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                inputVal: ''
            },
            tableData: [],
        }
    },
    methods: {
        // 关于查询及按钮操作========================
        // 查询
        handleSearch() { },
        // 上传
        handleUp() { },
        // 打包
        handleDb() { },
        // XML输出
        handleXML() { },
        // JSON输出
        handleJSON() { },


    },
}
</script>

<style lang="less" scoped>
.ruleCtImport {
    .title {
        width: 100%;
        height: 60px;
        line-height: 60px;
        background: #fff;
        border-bottom: 2px solid #707070;

        ul {
            width: 20%;
            height: 99.9%;
            display: flex;
            justify-content: space-around;

            li {
                cursor: pointer;
                padding: 0 10px;
                font-size: 20px;
                font-family: PingFang SC;
                font-weight: 500;
            }

            .act {
                color: #05acb5;
                border-bottom: 2px solid #05acb5;
            }
        }
    }

    .content {
        padding: 10px;
        box-sizing: border-box;

        .con {
            width: 100%;
            background: #fff;
            padding: 20px 15px 40px;
            box-sizing: border-box;
        }
    }
}
</style>